﻿@using HuiJiYunGo.EF;
@{
    Layout = null;
    var MaterialList = ViewBag.MaterialList as List<Material>;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>@ViewBag.MaterialName</title>
    <link href="~/Content/swiper.min.css" rel="stylesheet" />
    <link href="/Content/mobile/style.css" rel="stylesheet">
    <style>
        body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            background: #ef4949;
        }

        .header {
            width: 100%;
            display: flex;
            height: 44px;
        }

        .header-left {
            display: flex;
        }

        .header-right {
            display: flex;
        }

        .header-centre {
            display: flex;
            justify-content: center;
            white-space: nowrap;
            flex: 1 1;
            align-items: center;
        }

        .header-title {
            font-family: PingFangSC-Regular,PingFang SC;
            color: #fff;
        }

        img {
            vertical-align: top;
            display: block;
            border: none;
        }

        .content {
            padding: 0px 0px 0px 0px;
            margin-top: 0px;
            display: block;
        }

        /*.content_banner {*/
        /* width: 6.9rem;
            height: 2.52rem;*/
        /*border-radius: .12rem;
            margin: 1.9rem auto 0;
        }

            .content_banner img {
                width: 100%;
                height: 100%;
                border-radius: .12rem;
            }*/

        .container {
            width: 100%;
            height: 100%;
            /*border: 1px solid #ccc;*/
        }

        .swiper1 {
            width: 100%;
        }

            .swiper1 .selected {
                color: #fff !important;
                border-bottom: 2px solid #fff;
            }

            .swiper1 .swiper-slide {
                padding: 0 .2rem;
                white-space: nowrap;
                text-align: center;
                font-size: 16px;
                height: 36px;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                cursor: pointer;
                color: hsla(0,0%,100%,.6);
            }

        .swiper2 {
            width: 100%;
        }

            .swiper2 .swiper-slide {
                height: calc(100vh - 50px);
                /* background-color: #ccc;*/
                color: #000000;
                text-align: center;
                box-sizing: border-box !important;
                overflow-x: hidden !important;
            }

        .wrapper2-content a {
            background-color: white;
            border-radius: 6px;
            margin-top: 10px;
            margin-left: 8px;
            margin-right: 8px;
        }

        .btn-buy {
            width: 5.6rem;
            height: 2.68rem;
            background: linear-gradient(90deg,#ff5d6a,#fb86ef) !important;
            box-shadow: 0 0.04rem 0.06rem 0 rgba(235,73,251,.25);
            border-radius: 2rem .04rem .04rem 2rem;
            position: absolute;
            bottom: .24rem;
            right: -.08rem;
            border: 1px solid transparent;
            z-index: 1;
            padding-left: .28rem;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .tobuy {
            font-size: .24rem;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #fff;
        }

        .btn-buy span {
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0);
        }

            .btn-buy span:last-child {
                font-size: .24rem;
                font-family: PingFangSC-Medium,PingFang SC;
                font-weight: 500;
                color: #fff;
            }

        .jq22-flex-box h3 {
            font-size: 1.1rem;
        }
    </style>

</head>
<body>
    <div>
        <div id="headerMain" class="header">
            <div class="header-left">
                <img src="~/Content/static/img/fanghui.png" />
            </div>
            <div class="header-centre">
                <span class="header-title">@ViewBag.MaterialName</span>
            </div>
            <div class="header-right">
            </div>
        </div>
        <div class="content">
            <img src="@ViewBag.Ad_Img" />
        </div>

        <div class="container">
            
            <div class="swiper-container swiper1" style="@(MaterialList.Count==1?"display:none":"")">
                <div class="swiper-wrapper">
                    @for (int i = 0; i < MaterialList.Count; i++)
                    {
                        if (i == 0)
                        {

                            <div class="swiper-slide selected" data-id="@MaterialList[i].Id">@MaterialList[i].ShortName</div>
                        }
                        else
                        {
                            <div class="swiper-slide " data-id="@MaterialList[i].Id">@MaterialList[i].ShortName</div>

                        }
                    }
                    @*<div class="swiper-slide selected">推荐</div>
                        <div class="swiper-slide">菜单 2</div>
                        <div class="swiper-slide">菜单 3</div>
                        <div class="swiper-slide">菜单 4</div>
                        <div class="swiper-slide">菜单 5</div>
                        <div class="swiper-slide">菜单 6</div>
                        <div class="swiper-slide">菜单 7</div>
                        <div class="swiper-slide">菜单 8</div>
                        <div class="swiper-slide">菜单 9</div>
                        <div class="swiper-slide">菜单 10</div>*@
                </div>
            </div>
            <!-- swiper2 -->
            <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    @for (int i = 0; i < MaterialList.Count; i++)
                    {
                        <div class="swiper-slide swiper-no-swiping wrapper2-content">

                            @*<a href="//uland.taobao.com/coupon/edetail?e=24ig2UBwJ6ANfLV8niU3R5TgU2jJNKOfNNtsjZw%2F%2FoJ5ZHgRkKi9CnuYp4xySFtMIMEZ1YZb%2FfbNuDR7L4wMs8uRTiT9oEhVZV8pr6FWc0NCF3X0mavJukKNckgjFuqqmMHpNfYdHdB6mXxm99jFLOp0SWNx98LmzvXapDqGkcWyS80tVcIqlDTPIIbpRUILZQUWDPdEFUc%3D&amp;&amp;app_pvid=59590_11.132.118.144_619_1595727741191&amp;ptl=floorId:28026;app_pvid:59590_11.132.118.144_619_1595727741191;tpp_pvid:122ea1ea-12a1-4fae-9264-916e24a67219&amp;union_lens=lensId%3AMAPI%401595727741%40122ea1ea-12a1-4fae-9264-916e24a67219_545609591550%401" class="jq22-flex">
                                    <div class="jq22-img-pd">
                                        <img src="//img.alicdn.com/bao/uploaded/i1/2934881346/O1CN01szcizF1LoVh7E6PvC_!!0-item_pic.jpg" alt="">
                                    </div>
                                    <div class="jq22-flex-box">
                                        <h2>韩婵牛奶持久留香家庭装正品沐浴露</h2>
                                        <span>30日销量 154967</span>
                                        <h3>券后  ￥9.9</h3>
                                        <p>点击领取 20 元优惠券</p>
                                    </div>
                                    <div class="btn-buy" >
                                        <span class="tobuy">去购买</span>
                                        <span>3.8万人已购</span>
                                    </div>
                                </a>*@

                        </div>
                    }
                    @*<div class="swiper-slide swiper-no-swiping">

                        </div>
                        <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222</div>
                        <div class="swiper-slide swiper-no-swiping">内容 213213123</div>
                        <div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
                        <div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
                        <div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
                        <div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
                        <div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
                        <div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
                        <div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>*@
                </div>

            </div>

        </div>



    </div>
</body>
</html>
<script src="~/Scripts/Mobile/jquery.min.js"></script>
<script src="~/Scripts/swiper.jquery.js"></script>
<script src="~/Scripts/swiper.min.js"></script>
<script src="~/Scripts/template-web.js.js"></script>
<script type="text/html" id="tpl">
    {{each ResultList}}
    @*<li>
            {{$index}} ---- {{$value.Nick}}
        </li>*@
    <a href="/mobile/GoodsDetails?itemid={{$value.ItemId}}" class="jq22-flex">
        <div class="jq22-img-pd">
            <img src="{{$value.PictUrl}}" alt="">
        </div>
        <div class="jq22-flex-box">
            {{if($value.ShortTitle)}}
            <h2>{{$value.ShortTitle}}</h2>
            {{else}}
            <h2>{{$value.Title}}</h2>
            {{/if}}
            {{if($value.ItemDescription)}}
            <span>{{$value.ItemDescription}}</span>
            {{/if}}
            <h3>券后  ￥{{(($value.ZkFinalPrice-$value.CouponAmount)).toFixed(1)}}</h3>
            <p>可领取 {{$value.CouponAmount}} 元优惠券</p>
            <div class="btn-buy">
                <span class="tobuy">去购买</span>
                <span>{{$value.Volume}}已购</span>
            </div>
        </div>
    </a>
    {{/each}}
</script>
<script>
    $(function () {
        var tabsid = @(MaterialList[0].Id);
        var tabspage = 1;
        var tabsindex = 0;
        AjaxMaterialList(@(MaterialList[0].Id), 1, 0);//加载默认第一页

        function setCurrentSlide(ele, index) {
            $(".swiper1 .swiper-slide").removeClass("selected");
            ele.addClass("selected");
            //swiper1.initialSlide=index;
        }

        var swiper1 = new Swiper('.swiper1', {
            //					设置slider容器能够同时显示的slides数量(carousel模式)。
            //					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
            //					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            slidesPerView:@(MaterialList.Count>3?3.5: MaterialList.Count),
            paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            spaceBetween: 10,//slide之间的距离（单位px）。
            freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
            loop: false,//是否可循环
            onTab: function (swiper) {
                var n = swiper1.clickedIndex;
            }
        });
        swiper1.slides.each(function (index, val) {
            var ele = $(this);
            ele.on("click", function () {
                setCurrentSlide(ele, index);
                swiper2.slideTo(index, 500, false);
                //mySwiper.initialSlide=index;
                //alert(index);
                //console.log($(val).data("id"));
                AjaxMaterialList($(val).data("id"), 1, index);
                tabsid = $(val).data("id");
                tabspage = 1;
                tabsindex = index;
            });
        });

        var swiper2 = new Swiper('.swiper2', {
            //freeModeSticky  设置为true 滑动会自动贴合
            direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
            loop: false,
            //					effect : 'fade',//淡入
            //effect : 'cube',//方块
            //effect : 'coverflow',//3D流
            //					effect : 'flip',//3D翻转
            autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
            onSlideChangeEnd: function (swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
                var n = swiper.activeIndex;
                setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                swiper1.slideTo(n, 500, false);
            }
        });

        function AjaxMaterialList(id, page, index) {
            $.ajax({
                url: '/Mobile/AjaxMaterialList',
                type: 'POST',
                dataType: 'json',
                data: { id: id, page: page },
                success: function (result) {
                    console.log(result);
                    //$(".wrapper2-content").eq(index).html("");
                    var html = template('tpl', { ResultList: result.ResultList})
                    //var container = $(".wrapper2-content").eq(index);
                    //container.innerHTML = html;
                    $(".wrapper2-content").eq(index).append(html);
                },
                error: function (res) {
                    // 错误时处理逻辑
                }
            });
        }

        $('.wrapper2-content').scroll(function () {
            var viewH = $(this).height(),//可见高度
                contentH = $(this).get(0).scrollHeight,//内容高度
                scrollTop = $(this).scrollTop();//滚动高度

            console.log(viewH + ',' + contentH + ',' + scrollTop);

            if (contentH - viewH - scrollTop == 0) {
                //$('.wrapper2-content').append("111111111111");
                tabspage += 1;
                AjaxMaterialList(tabsid, tabspage, tabsindex);
            }
        });

        $(".header-left").click(function () {
            window.location.href = "javascript:history.go(-1)";
        });


        var windowWidth = $(window).width();//屏幕的宽度 
        var divWidth = 0;//每个div宽度 
        var resPlaceX = 0;//最终的位置X 
        var moveDistance = 0;//移动的距离 
        var startTranform = 0;//当前的transform值 
        var startTranformStr = ''//transform字符串 
        $('.swiper1 .swiper-slide').on('click', function (e) {
            var ev = e || event; var disX = ev.clientX - ev.offsetX;//当前div距离屏幕左边距离 
            divWidth = $(this).width(); resPlaceX = (windowWidth - divWidth) / 2;
            moveDistance = disX - resPlaceX;
            startTranformStr = $('.swiper1 .swiper-wrapper').get(0).style.transform;
            startTranform = startTranformStr.slice(startTranformStr.indexOf('(') + 1, startTranformStr.indexOf('px'));
            if (startTranform == '') { startTranform = 0 };
            $('.swiper1 .swiper-slide').removeClass('font-red');
            $(this).addClass('font-red');
            $('.swiper1 .swiper-wrapper').css({ 'transform': 'translate3d(' + (parseInt(startTranform) + -moveDistance) + 'px,0,0)', 'transition-duration': '1s' });
        });
    });
</script>
